// 手术申请
import React, { Component } from 'react';
import { Row, Col, Select, Button, message, Checkbox, Input, Icon, TimePicker, Popconfirm, Popover } from 'antd';
import { $http } from '../../../containers/config/https';
import moment from 'moment';
import { Util } from 'tools/index';
import OperationCheck from './OperationCheck';
import RiskAssessment from './RiskAssessment';
import OperativeCount from './OperativeCount.jsx';
import AnesthesiaModel from './AnesthesiaModel.jsx';
import CommonPagination from 'components/pagination/index';
import CommonRangePicker from 'components/rangePicker/index';
import { handleExcel } from 'tools/handleExcel.js';
import ColumnAuthoritysModel from '../../columnAuthority/ColumnAuthoritysModel';
// import store from 'store';
import './style/OperationSearch.less';
import { $loadTemplate } from '../../lodop/Common/Print.js';
import OperationPatDispatch from './OperationPatDispatch'
import { $loopPrint } from '../../lodop/Common/Print';

const { Option } = Select;
// 用户数据
let userData;
export default class OperationSearch extends Component {
	constructor(props) {
		super(props);

		this.state = {
			column: [],
			columns: [],
			tableData: [], // table数据
			total: 0,  // table数据总量            
			applyLocData: [],	// 申请科室下拉数据
			operationRoomData: [], // 手术间下拉数据
			operationTypeData: [], // 手术类型下拉数据
			operationStatusData: [], // 手术状态下拉数据
			operatingRoomData: [], //手术室下数据
			patWardData: [], // 患者病区下拉数据
			doctorArr: [], // 主刀医生
			applyDoctorArr: [], // 主管医生
			stDate: moment().format('YYYY-MM-DD'), // 开始日期
			endDate: moment().format('YYYY-MM-DD'), // 结束日期
			applyDateFlag: '', // 按申请日期
			applyLocID: '',	 // 申请科室
			operationRoomID: '', // 手术间
			operationStatusID: '', // 手术状态
			operationTypeID: '', // 手术类型
			patWardID: '', // 患者病区
			number: '',	// 患者信息
			condition: '', // 条件
			operationLocID: '', //手术室ID
			operRoomOption: '', //判断手术室下拉框显示
			doctorIDs: [], // 主刀医生
			applyDoctorIDs: [], // 主管医生
			page: '1',
			pageSize: '50',
			clickFlag: false,
			checked: false,
			patNumber: '',
			errorList: [],
			clickCol: '',
			tableWidth: 0,
			opertaionData: [],
			operationStatus: '',
			locType: '',
			operationType: '',
			TableListData: [],
			visibleOperationCheck: false,
			selectedID: '',
			activeKey: '',
			admID: '',
			patID: '',
			ENObj: {},
			CNObj: {},
			selectOperation: [],
			editingKey: {},
			editArr: [],
			operationID: '',
			exportLoading: false,
			selectStatusCode: '',		// 状态下拉数据选中code
			selectData: {},
			queryHeight: 148
		}
		userData = sessionStorage.userData ? JSON.parse(sessionStorage.userData) : {};
		this.queryRef = React.createRef();
	}

	componentDidMount() {
		this.getTableTitle();
		this.getApplyLocData();
		this.getPatWardData();
		this.getOption();
		this.getOperatingRoom();
		this.getOperationInfo();
		this.getselect();
		this.getDetailTableColumns()
		//document.querySelector('.ant-table-body').style.height = store.getState().tableHeight.y + 'px';
	}

	rowColor = (row, index) => {

		if (row.statusCode == '01') {
			return 'a'
		}

		if (row.statusCode == '02') {
			return 'b'
		}

		if (row.statusCode == '03') {
			return 'c'
		}

		if (row.statusCode == '04') {
			return 'd'
		}

		if (row.statusCode == '05') {
			return 'e'
		}

		if (row.statusCode == '06') {
			return 'f'
		}

		if (row.statusCode == '07') {
			return 'g'
		}

		// if (row.statusCode == '08') {
		// 	return 'h'
		// }

		return ''
	}

	// 获取明系列表头数据
	getDetailTableColumns = () => {
		let { userInfo } = this.state;
		let data = {
			params: [{
				reactCode: ['SeacrchOperation'],
				compontName: 'SeacrchOperation',
				type: 'C',
			}]
		}
		$http.post('urlS', this, {
			code: '01040073',
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					this.setState({
						ENObj: res.result.language.EN,
						CNObj: res.result.language.CN
					})
				}
			}
		})
	};

	//查询表头信息
	getTableTitle = () => {
		let data = {
			params: [{
				reactCode: ['OperationSearch'],
				compontName: 'OperationSearch',
				type: 'C',
			}]
		}
		$http.post('urlS', this, {
			code: '01040073',
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					let colums = [];
					let column = res.result.C;
					var exportColumn = []
					if (!Util.isEmpty(column)) {
						for (var i = 0; i < column.length; i++) {
							if (column[i].exportFlag == 'Y') {
								exportColumn.push(column[i])
							}
						}
					}
					if (userData.language == 'EN') {
						for (let i = 0; i < column.length; i++) {
							column[i].title = column[i].enDescripts
							// if (columns[i].dataIndex == 'patDiag') {
							// 	column[i].onCell = () => {
							// 		return {
							// 			style: {
							// 				maxWidth: 150,
							// 				overflow: 'hidden',
							// 				whiteSpace: 'nowrap',
							// 				textOverflow: 'ellipsis',
							// 				cursor: 'pointer'
							// 			}
							// 		}
							// 	}
							// 	column[i].render = (text) => <Tooltip placement="topLeft" title={text}>{text}</Tooltip>
							// }
						}
					}
					colums = this.state.column.concat(res.result.C);

					this.setState({
						columns: colums,
						tableWidth: res.totalWidth,
						exportColumn: exportColumn
					}, () => {
						this.getOperationInfo();
					})
				}
			}
		});
	}

	//患者病区
	handlePat = (e) => {
		this.setState({
			patWardID: e
		}, () => {
			this.getOperationInfo();
		});
	};

	//手术室
	handelRoomDesc = (e) => {
		this.setState({
			operationLocID: e
		}, () => {
			this.getOperationInfo();
		})
	}

	//主刀医生
	handelDoctor = (e) => {
		this.setState({
			doctorIDs: e
		}, () => {
			this.getOperationInfo();
			this.setState({ queryHeight: this.queryRef?.current?.clientHeight || 148 });
		})
	}
	//主管医生
	handelApplyDoctor = (e) => {
		this.setState({
			applyDoctorIDs: e
		}, () => {
			this.getOperationInfo();
			this.setState({ queryHeight: this.queryRef?.current?.clientHeight || 148 });
		})
	}

	//登记名/证件/姓名
	handlePatNumber = (e) => {
		this.setState({
			patNumber: e.target.value
		}, () => {
			this.getOperationInfo();
		})
	}

	//状态
	handleStatusData = (val, opt) => {
		this.setState({
			operationStatus: val,
			selectStatusCode: opt?.props?.code || ''
		}, () => {
			this.getOperationInfo();
		})
	}

	//类型
	handleoperationType = (e) => {
		this.setState({
			operationType: e
		}, () => {
			this.getOperationInfo();
		})
	}

	// 获取下拉框数据
	getselect = () => {
		let data = {
			params: [{
				locID: userData.locID
			}]
		};
		$http.post('urlDeault', this, {
			code: "04160005",
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					this.setState({
						operationRoomData: res.result
					})
				}
			},
			error: function (error) {
				message.error('失败：' + error);
			}
		});
	}

	//获取科室下拉数据
	getApplyLocData = () => {
		let data = {
			params: [{
				hospID: userData.hospID,
				type: 'O^I^OI^E',
			}]
		}
		$http.post('urlS', this, {
			code: '04020008',
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					this.setState({
						applyLocData: res.result.Data,
					})
				}
			}
		});
	}

	//获取病区下拉数据
	getPatWardData = () => {
		let data = {
			params: [{
				hospID: userData.hospID,
				type: 'W',
			}]
		}
		$http.post('urlS', this, {
			code: '04020008',
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					this.setState({
						patWardData: res.result.Data,
					})
				}
			}
		});
	}

	// 获取下拉数据源
	getSelectData = () => {
		let data = {
			params: [{

			}]
		};
		$http.post('urlDeault', this, {
			code: "**",
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					this.setState({
						conTypeData: res.result.conType
					})
				}
			},
			error: function (error) {
				message.error('失败：' + error);
			}
		});
	}

	// 获取下拉数据源
	getOption = () => {
		let data = {
			params: [{

			}]
		};
		$http.post('urlDeault', this, {
			code: "04160007",
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					this.setState({
						selectData: res?.result || {},
						operationStatusData: res.result.operationStatusData,
						operationTypeData: res.result.operationTypeData,
						locType: res.result.locType,
						doctorArr: res.result.doctorArr,
						applyDoctorArr: res.result.applyDoctorArr
					})
				}
			},
			error: function (error) {
				message.error('失败：' + error);
			}
		});
	}

	//获取手术室下数据
	getOperatingRoom = () => {
		let data = {
			params: [{

			}]
		};

		$http.post('urlDeault', this, {
			code: "04160037",
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					this.setState({
						operatingRoomData: res.result.Data,
						operRoomOption: res.result.Display,
					})
				}
			},
			error: function (error) {
				message.error('失败：' + error);
			}
		});
	}

	// 查询手术信息
	getOperationInfo = () => {
		this.setState({
			clickFlag: true,
			selectOperation: []
		})
		let { page, pageSize, patWardID, patNumber, operationStatus, operationType, applyLocID, operationLocID, doctorIDs,applyDoctorIDs } = this.state;
		let data = {
			"params": [{
				startDate: moment(this.state.stDate).format('YYYY-MM-DD'),
				stopDate: moment(this.state.endDate).format('YYYY-MM-DD'),
				applyFlag: this.state.checked ? 'Y' : 'N',
				applyLocID: applyLocID,
				operationRoomID: "",
				operationStatusID: operationStatus,
				operationType: operationType,
				patNumber: patNumber,
				patWardID: patWardID,
				operationLocID: operationLocID,
				doctorIDs: doctorIDs,			// 主刀医生
				applyDoctorIDs: applyDoctorIDs			// 主管医生
			}],
			pagination: [{
				pageSize: pageSize,
				currentPage: page,

			}]
		};
		let editArr = [];
		$http.post('urlDeault', this, {
			code: "04160006",
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					let tableData = res.result.Data;
					for (let i = 0; i < tableData.length; i++) {
						tableData[i].key = i
						if (tableData[i].statusCode == "01") {
							editArr.push(tableData[i].id)
						}
					}
					this.setState({
						tableData,
						clickCol: '',
						total: res.result.TotalCount,
						clickFlag: false,
						editArr: editArr,
						clickRow: {},
					})
				} else {
					this.setState({
						clickFlag: false,
					})
				}
			},
			error: function (error) {
				message.error('失败：' + error);
				this.setState({
					clickFlag: false,
				})
			}
		});
	}

	// 安排手术
	arrangeOperation = (code) => {
		const { selectOperation, tableData } = this.state;
		selectOperation.sort(function (a, b) {
			if (a > b) { // a b 分别是Arr中的 56 21
				return 1  //返回正数 ，b排列在a之前
			} else {
				return -1 //返回负数 ，a排列在b之前
			}
		})
		if (selectOperation.length < 1) {
			message.warning('请选择要安排的手术')
			return;
		}

		let params = [];
		for (let i = 0; i < selectOperation.length; i++) {
			let obj = {};
			obj.statusCode = code;
			obj.operationApplyID = tableData[selectOperation[i]].id;
			obj.opeartionRoomID = tableData[selectOperation[i]].arrangeOperationRoomID;
			/* // 批量安排取第一条日期时间(后台已做判断)
			if (code == '02' && obj.opeartionRoomID == '') {
				message.warning('请选择手术间')
				return;
			}
			obj.operationApplyTime = tableData[selectOperation[i]].arrangeOperationTime && tableData[selectOperation[i]].arrangeOperationTime != "" ? tableData[selectOperation[i]].arrangeOperationTime : '';
			if (code == '02' && obj.operationApplyTime == '') {
				message.warning('请选择手术时间')
				return;
			}
			obj.operationApplyNumber = tableData[selectOperation[i]].arrangeNumber;
			if (code == '02' && obj.operationApplyNumber == '') {
				message.warning('请输入台次')
				return;
			}
			*/
			obj.operationApplyTime = tableData[selectOperation[i]].arrangeOperationTime && tableData[selectOperation[i]].arrangeOperationTime != "" ? tableData[selectOperation[i]].arrangeOperationTime : '';
			obj.operationApplyNumber = tableData[selectOperation[i]].arrangeNumber;
			params.push(obj);
		}
		let data = {
			params: params
		};
		$http.post('urlDeault', this, {
			code: "04160002",
			data: data,
			success: function (res) {
				if (+res.errorCode == '0') {
					message.success('成功');
					if (code == '02') {
						this.setState({
							editingKey: {},
						})
					}
					this.getOperationInfo();
				}
			},
			error: function (error) {
				message.error('失败：' + error);
			}
		});
	}

	// 打印手术通知单
	print = () => {
		const { selectOperation, tableData } = this.state;
		if (selectOperation.length < 1) {
			message.warning('请选择一条数据!');
			return;
		}
		let data = {};
		data = {
			params: [{
				patOperationID: tableData[selectOperation[0]].id
			}]
		}
		let templateCode = 'SurgeryRF';
		$http.post('urlS', this, {
			code: '04160009',
			data: data,
			success: function (res) {
				if (res.errorCode === '0') {
					//加载模板
					$loadTemplate(templateCode, res.result);
				}
			}
		})
	}

	// 翻页
	onChange = (page, pageSize) => {
		this.setState({ page: page, pageSize: pageSize }, () => {
			// 重新调用查询方法
			this.getOperationInfo();
		});
	};

	onShowSizeChange = (current, size) => {
		this.setState({ page: current, pageSize: size }, () => {
			// 重新调用查询方法
			this.onChange(current, size);
		})
	};

	// 获取Checkbox操作后的值
	handleCheckbox = (e) => {
		this.setState({ checked: e.target.checked }, () => {
			this.getOperationInfo();
		});
	}

	//安全检查弹框调用
	onConsumeCheckRef = (ref) => {
		this.childConsumeCheck = ref;
	};

	//麻醉弹框调用
	onConsumeRef = (ref) => {
		this.childConsume = ref;
	};

	//手术清点调用
	onConsumeCountRef = (ref) => {
		this.childConsumeCount = ref;
	}

	//手术风险评估
	onConsumeSomeRef = (ref) => {
		this.childConsumeSome = (ref);
	}

	//手术病人运输申请
	onConsumeDispatchRef = (ref) => {
		this.childConsumequect = ref;
	}

	requestConsome(code) {
		const { selectOperation, tableData } = this.state;
		if (selectOperation.length < 1) {
			message.warning('请选择一条数据!');
			return;
		}
		let patientData = {}
		patientData = {
			admID: tableData[selectOperation[0]].admID,
			patID: tableData[selectOperation[0]].patID
		}
		sessionStorage.setItem('patientData', JSON.stringify(patientData));
		this.setState({
			selectedID: tableData[selectOperation[0]].id,
			activeKey: code
		}, () => {
			this.childConsume.showModal();
		})
	};

	//拒绝手术
	rejectOpration = () => {
		const { selectOperation, tableData } = this.state;
		if (selectOperation.length == 0) {
			message.warning('请选择一条要拒绝的手术!');
			return;
		}
		if (selectOperation.length > 1) {
			message.warning('不能批量拒绝手术，请选择单条!');
			return;
		}
		let data = {
			params: [{
				operationApplyID: tableData[selectOperation[0]].id,
				statusCode: "03",
			}]
		};
		let that = this;
		$http.post('urlS', this, {
			code: "04160024",
			data: data,
			success: function (res) {
				if (+res.errorCode === 0) {
					message.success("成功!");
					that.getOperationInfo();
				} else {
					message.error(res.errorMessage);
				}
			}
		})
	}

	//安全核查
	requestCheck = (code) => {
		const { selectOperation, tableData } = this.state;
		if (selectOperation.length < 1) {
			message.warning('请选择一条数据!');
			return;
		}
		let patientData = {}
		patientData = {
			admID: tableData[selectOperation[0]].admID,
			patID: tableData[selectOperation[0]].patID
		}
		sessionStorage.setItem('patientData', JSON.stringify(patientData));
		this.setState({
			selectedID: tableData[selectOperation[0]].id,
			activeKey: code
		}, () => {
			this.childConsumeCheck.showModal();
		})
	}

	//手术清点
	requestCount = () => {
		const { selectOperation, tableData, operationID, admID, locType } = this.state;
		if (selectOperation.length < 1) {
			message.warning('请选择一条数据!');
			return;
		}
		let patientData = {}
		patientData = {
			admID: tableData[selectOperation[0]].admID,
			patID: tableData[selectOperation[0]].patID
		}
		sessionStorage.setItem('patientData', JSON.stringify(patientData));
		this.setState({
			selectedID: tableData[selectOperation[0]].id,
			//activeKey: code
		}, () => {
			this.childConsumeCount.modifyVisible(true, { operationID, admID, locType });
		})
	}

	//手术风险评估
	requestRick = () => {
		const { selectOperation, tableData } = this.state;
		if (selectOperation.length < 1) {
			message.warning('请选择一条数据!');
			return;
		}
		let patientData = {}
		patientData = {
			admID: tableData[selectOperation[0]].admID,
			patID: tableData[selectOperation[0]].patID
		}
		sessionStorage.setItem('patientData', JSON.stringify(patientData));
		this.setState({
			selectedID: tableData[selectOperation[0]].id,
			//activeKey: code
		}, () => {
			this.childConsumeSome.showModal();
		})
	}

	//手术病人运输申请
	requestPatDisptch = () => {
		const { selectOperation, tableData } = this.state;
		if (selectOperation.length < 1) {
			message.warning('请选择一条数据!');
			return;
		}
		let patientData = {}
		patientData = {
			admID: tableData[selectOperation[0]].admID,
			patID: tableData[selectOperation[0]].patID
		}
		sessionStorage.setItem('patientData', JSON.stringify(patientData));
		this.setState({
			selectedID: tableData[selectOperation[0]].id,
			//activeKey: code
		}, () => {
			this.getInitNursingRecordsData();
		})
	}

	// 初始化手术护理记录数据
	getInitNursingRecordsData = async () => {
		try {
			const { operationID, admID, patID, locType } = this.state;
			let data = {
				params: [{
					operationID,
					admID,
					locType,
					templateCode: 'SSHLJLD2',
					searchWords: '',
				}]
			}
			let res = await React.$asyncPost(this, '04220021', data);
			// 参数2为: 基础信息  参数3为下拉数据  参数4: 为术前记录、术中记录、术后记录回显数据  参数5为: 术后转运交接记录回显数据
			this.childConsumequect.modifyVisible(true, { operationID, admID, patID, locType, EMRRecordID: res?.EMRRecordID || '', ZYEMRRecordID: res?.ZYEMRRecordID || '' }, res?.result || {}, res?.IEMRTempElementData || {}, res?.ZYIEMRTempElementData || {});
		} catch (error) {
			console.log(error);
		}
	}

	///点击单元格
	onCell = (colIndex, record, index) => {
		return {
			onClick: (event) => {
				this.setState({
					clickCol: index + "." + colIndex,
				})
			},
			onDoubleClick: (event) => {
			}
		}
	}

	// 新增跳转到新增界面
	handleAdd = () => {
		const { selectOperation, tableData } = this.state;
		if (selectOperation.length < 1) {
			let patientData = {}
			sessionStorage.setItem('patientData', JSON.stringify(patientData));
			message.warning('请选择患者!');
			return;
		}
		let patientData = {}
		patientData = {
			admID: tableData[selectOperation[0]].admID,
			patID: tableData[selectOperation[0]].patID
		}
		sessionStorage.setItem('patientData', JSON.stringify(patientData));
		if (this.props.openWindowBySubTab) {
			var data = {

			}
			this.props.openWindowBySubTab({
				title: '手术医嘱录入',
				path: '/04160004',
				Paras: {
					targetKey: '新增医嘱录入',
					flag: 'add',
					userInfo: data
				},
				component: "pages/nurse/operation/OperationApplyDoctor.jsx"
			});
		} else {
			this.props.history.push('../04160004?ComponentName=' + "./DoctorDiag.jsx")
		}
	}

	onTableClickRow = (record, index, e) => {
		let { statusCode, id, admID, patID } = record;
		let selectOperation = this.state.selectOperation;
		var clickRow = ""
		var editingKey = ""
		if ((e.target.nodeName == "TD") || (e.target.type == "checkbox")) {
			let start = "-1";
			selectOperation.find(function (value, key) {
				if (value == index) {
					start = key;
				}
			})
			if (start != "-1") {
				selectOperation.splice(start, 1);
			} else {
				selectOperation.push(index + "");
			}
			if (id == this.state.clickRow) {
				clickRow = ""
			} else {
				clickRow = id
			}
		}
		this.setState({
			selectOperation: selectOperation,
			clickRow: clickRow,
			operationID: record.id,
			patID,
			admID: admID,
			editingKey: statusCode === '01' || statusCode === '02' ? editingKey : '',
		}, () => {
			this.getselect();
		})
		let patientData = {}
		patientData = {
			admID,
			patID
		}
		sessionStorage.setItem('patientData', JSON.stringify(patientData));
	}

	onTableDoubleClickRow = (record, index, e) => {
		const { id, admID, patID } = record;
		if (e.target.nodeName == "TD") {
			var patientObj = new Object();
			patientObj.admID = admID;
			patientObj.patID = patID;

			this.setState({
				selectedID: id,
				activeKey: '1',
				admID,
				patID
			}, () => {
				sessionStorage.setItem('patientData', JSON.stringify(patientObj));
				this.childConsume.showModal();
				//this.childConsumeCheck.showModal();
			})
		}
	}

	onScroll = (e) => {
		//当医嘱数据左右滚动时标题跟随滚动
		const scrollLeft = document.getElementById('OperationTable').scrollLeft;
		document.getElementById('title').scrollLeft = scrollLeft;
	}

	onGroupCheck = (checkedValues) => {
		this.setState({
			selectOperation: checkedValues
		})
	}

	onCheckOperationChange = () => {

	}

	onColumnRef = (ref) => {
		this.columnRef = ref;
	}

	handleCheckAll = (e) => {
		const checked = e.target.checked
		let tableData = this.state.tableData
		var selectOperation = [];
		if (checked) {
			for (var i = 0; i < tableData.length; i++) {
				selectOperation.push(i + "");
			}
			this.setState({ selectOperation: selectOperation })
		} else {
			this.setState({ selectOperation: [] })
		}
	}

	addEditArr() {
		//console.log(this.state.selectOperation)
		var OperationArr = this.state.selectOperation
		var data = this.state.tableData
		var editArr = this.state.editArr
		for (var i = 0; i < OperationArr.length; i++) {
			if (data[OperationArr[i]].statusCode == "02") {
				editArr.push(data[OperationArr[i]].id)
			}
		}
		this.setState({
			editArr: editArr
		})
	}

	// 汇总打印
	printSummary = () => {
		let { applyLocID, operationStatus, operationType, patNumber, patWardID, operationLocID, selectOperation, tableData, doctorIDs, applyDoctorIDs } = this.state
		let idArr = [];
		for (let i = 0; i < selectOperation.length; i++) {
			idArr.push(tableData[selectOperation[i]].id)
		}
		let data = {
			params: [{
				startDate: moment(this.state.stDate).format('YYYY-MM-DD'),
				stopDate: moment(this.state.endDate).format('YYYY-MM-DD'),
				applyFlag: this.state.checked ? 'Y' : 'N',
				applyLocID: applyLocID,
				operationRoomID: "",
				operationStatusID: operationStatus,
				operationType: operationType,
				patNumber: patNumber,
				patWardID: patWardID,
				operationLocID: operationLocID,
				doctorIDs: doctorIDs,
				applyDoctorIDs: applyDoctorIDs,
				idArr
			}]
		};
		$http.post('urlS', this, {
			code: "04160023",
			data: data,
			success: function (res) {
				// console.log(res)
				if (+res.errorCode === 0) {
					$loopPrint('', res.result);
				} else {
					message.error(res.errorMessage);
				}
			}
		})
	}

	applyOperation = () => {
		const { selectOperation, tableData } = this.state;
		if (selectOperation.length < 1) {
			message.warning('请选择要申请的手术')
			return;
		}
		let IDArr = [];
		for (let i = 0; i < selectOperation.length; i++) {
			IDArr.push(tableData[selectOperation[i]].id);
		}
		let data = {
			params: [{
				IDArr
			}]
		};
		$http.post('urlDeault', this, {
			code: "04160026",
			data: data,
			success: function (res) {
				if (+res.errorCode == '0') {
					if (res.warningMsg.length > 0) {
						let warningMsg = ''
						for (data in res.warningMsg) {
							if (warningMsg == '') {
								warningMsg = res.warningMsg[data]
							} else {
								warningMsg = warningMsg + ',' + res.warningMsg[data]
							}
						}
						message.warning(warningMsg)
					} else {
						message.success('成功');
					}
					this.getOperationInfo();
				}
			},
			error: function (error) {
				message.error('失败：' + error);
			}
		});
	}

	onExportData() {
		this.setState({
			exportLoading: true,
		}, () => {
			this.loadExportMsg()
		})
	}

	loadExportMsg() {
		this.setState({
			exportLoading: true
		})
		let { patWardID, patNumber, operationStatus, operationType, applyLocID } = this.state;
		let data = {
			"params": [{
				startDate: moment(this.state.stDate).format('YYYY-MM-DD'),
				stopDate: moment(this.state.endDate).format('YYYY-MM-DD'),
				applyFlag: this.state.checked ? 'Y' : 'N',
				applyLocID: applyLocID,
				operationRoomID: "",
				operationStatusID: operationStatus,
				operationType: operationType,
				patNumber: patNumber,
				patWardID: patWardID
			}]
		};
		let editArr = [];
		$http.post('urlDeault', this, {
			code: "04160006",
			data: data,
			success: function (res) {
				if (res.errorCode == '0') {
					this.setState({
						exportData: res.result.Data,
						exportLoading: false,
					}, () => {
						handleExcel.exportExcel(this.state.exportColumn, this.state.exportData, '手术查询列表导出')
						message.success('导出成功！')
					})
				}
			}
		});
	}

	/**
	 * 撤消术后登记
	 */
	cancelSurgeryRegister = () => {
		const { selectOperation, tableData } = this.state;
		if (selectOperation.length < 1) {
			message.warning('请选择一条数据!');
			return;
		}
		var selectedID = tableData[selectOperation[0]].id;
		var statusCode = tableData[selectOperation[0]].statusCode;
		if (statusCode != '07') {
			message.warning('非完成状态!!!');
			return;
		}
		let data = {
			"params": [{
				statusCode: '02',
				operationID: selectedID,
			}]
		};
		$http.post('urlDeault', this, {
			code: "04160029",
			data: data,
			success: function (res) {
				if (res.errorCode == '0') {
					this.getOperationInfo();
				}
			}
		});
	}

	// 腕带打印
	handleWristbandPrint = async () => {
		try {
			const { selectOperation, tableData } = this.state;
			if (selectOperation.length < 1) {
				message.warning('请选择一条数据!');
				return;
			}
			let record = tableData[selectOperation[0]];
			let patientData = {
				admID: record?.admID || '',
				patID: record?.patID || '',
			}
			sessionStorage.setItem('patientData', JSON.stringify(patientData));
			let data = {
				params: [{
					admID: record?.admID || '',
					bedID: record?.bedID || '',
					operID: record?.id || '',
				}]
			}
			let res = await React.$asyncPost(this, '04140013', data);
			$loadTemplate(record?.templateCode || 'WristbandOP', res.result);
		} catch (error) {
			console.log(error)
		}
	}

	render() {
		const { selectData, tableData, doctorIDs, applyDoctorIDs, queryHeight } = this.state;
		const iconStyle = {
			color: 'rgba(0,121,254,1)',
			cursor: 'pointer',
		}
		const spanStyle = {
			color: 'rgba(0,121,254,1)',
			marginRight: '5px',
			cursor: 'pointer',
		}
		const columns = this.state.columns;

		var language = userData.language
		var languageObj = {}
		if (language == 'EN') {
			languageObj = this.state.ENObj
		} else {
			languageObj = this.state.CNObj
		}
		let table = [];
		let tableWidth = this.state.tableWidth + '';
		if (tableWidth.indexOf('px') > 0) {
			tableWidth = parseInt(tableWidth.split('px')) + 26;
		}

		tableWidth = tableWidth + 'px';
		table.push(
			<div
				key="title"
				id="title" style={{ overflowX: 'hidden', overflowY: 'scroll' }}>
				<div style={{ width: tableWidth }} >
					<table key="titleT" border='1' style={{ border: '0px solid #E1E1E1' }} className="orderTitle">
						<thead>
							<tr className="operationTitletr"
								onDoubleClick={() => {
									this.columnRef.onOpenModel();
								}}>
								<td
									key="check"
									style={{ width: "26px" }}>
									<Checkbox

										onChange={this.handleCheckAll.bind(this)}
										indeterminate={(this.state.selectOperation.length !== this.state.tableData.length) && (this.state.selectOperation.length > 0)
										}
										checked={(this.state.selectOperation.length == this.state.tableData.length) && (this.state.tableData.length > 0)}
									></Checkbox>

								</td>
								{
									columns.map(
										(column) => {
											return (
												<th key={column.dataIndex} style={{ width: column.width, maxWidth: column.width, textAlign: column.align }}>
													{column.title}
												</th>
											)
										})
								}
							</tr>
						</thead>
					</table>
				</div>
			</div >
		);
		let tableItem = [];
		tableData.map((operation, index) => {
			tableItem.push(
				<tr
					key={operation.id}
					className={"operationItemtr " + (this.state.clickRow == operation.id ? "clickRowStyle " : " ") + this.rowColor(operation)}
					onClick={this.onTableClickRow.bind(this, operation, index)}
					onDoubleClick={this.onTableDoubleClickRow.bind(this, operation, index)}
				>
					<td
						style={{ width: "26px" }}
						rowSpan={operation.operationDetail.length || 1}
					>
						<Checkbox
							value={index + ""}
							onChange={this.onCheckOperationChange.bind(this, operation)}
						></Checkbox>
					</td>
					{
						columns.map(
							(column, colIndex) => {
								let text = operation[column.dataIndex], title = operation[column.dataIndex] + "";
								if (column.dataIndex === "arrangeOperationRoomID") {
									text = (
										<Select
											//disabled={this.state.editArr.indexOf(operation.id) == -1 }
											disabled={(this.state.editArr.indexOf(operation.id) == -1) || (this.state.locType != 'OP')}
											autoFocus={true}
											allowClear={true}
											value={text}
											style={{ width: '100%' }}
											onChange={(e) => {
												// if (typeof(e) == 'object') { e.stopPropagation(); }
												tableData[index]['arrangeOperationRoomID'] = e
												this.setState({ tableData }, () => { this.getselect() })
											}}
										>
											{this.state.operationRoomData.map(data => (
												<Select.Option key={data.id} value={data.id} role={data.code + '^' + (userData.language == "EN" ? data.enDescripts : data.descripts) + '^' + data.descriptsSPCode}>{userData.language == "EN" ? data.enDescripts : data.descripts}
												</Select.Option>))}
										</Select>
									)

								} else if (column.dataIndex === "arrangeOperationTime") {
									text = (
										<TimePicker
											// disabled={(operation.id !== editingKey) || (this.state.locType != 'OP')}
											disabled={(this.state.editArr.indexOf(operation.id) == -1) || (this.state.locType != 'OP')}
											format='HH:mm'
											style={{
												width: '100%'
											}}
											placeholder=""
											value={operation.arrangeOperationTime ? moment(operation.arrangeOperationTime, 'HH:mm') : null}
											//defaultValue={moment(new Date(), 'HH:mm:ss')}
											onChange={(e, timeString) => {
												// if (e) { e.stopPropagation(); }
												tableData[index]['arrangeOperationTime'] = timeString;
												this.setState({ tableData }
												)
											}}
										/>
									)
								}
								else if (column.dataIndex === "arrangeNumber") {
									text = (
										<Input
											style={{
												width: '100%'
											}}
											// disabled={(operation.id !== editingKey) || (this.state.locType != 'OP')}
											disabled={(this.state.editArr.indexOf(operation.id) == -1) || (this.state.locType != 'OP')}
											value={text}
											onChange={(e) => {
												if (e) { e.stopPropagation(); }
												tableData[index]['arrangeNumber'] = e.target.value
												this.setState({ tableData })
											}}
										/>
									)
								}
								let mergeFlag = true;
								if ((column.dataIndex == 'operationDesc') || (column.dataIndex == 'operationPartStr')) {
									mergeFlag = false;
									text = operation.operationDetail.length > 0 && operation.operationDetail[0][column.dataIndex];
									title = operation.operationDetail.length > 0 && operation.operationDetail[0][column.dataIndex] + '';
								}
								return (
									<td
										key={colIndex}
										rowSpan={mergeFlag ? (operation.operationDetail.length || 1) : 1}
										style={{
											width: column.width, textAlign: column.align,
											maxWidth: column.width,
										}}
										title={column.visible == 'Y' ? title : ''}
									>
										{column?.dataIndex === 'settledAmt' ? (
											<Popover placement="left" content={(<div>
												{'detailStr' in operation && operation['detailStr'] && typeof (operation['detailStr']) === 'string' && operation['detailStr'].indexOf(';') > -1 ? operation['detailStr'].split(';').map((itemPopover, indexPopover) => {
													return itemPopover ? <div key={indexPopover}>{itemPopover};</div> : '';
												}) : operation['detailStr']}
											</div>)} title="已结算手术费金额">{text}</Popover>
										) : text}
									</td>
								)
							})
					}
				</tr>)
			{
				operation.operationDetail.map(
					(children, childIndex) => {
						if (childIndex != 0) {
							tableItem.push(
								<tr
									key={children.opItemID}
									className={'operationItemtr ' + (this.state.clickRow == operation.id ? 'clickRowStyle ' : ' ') + this.rowColor(operation)}
									onClick={this.onTableClickRow.bind(this, operation, index)}
									onDoubleClick={this.onTableDoubleClickRow.bind(this, operation, index)}
								>
									{
										columns.map(
											(column) => {
												let text = '';
												if ((column.dataIndex == 'operationDesc') || (column.dataIndex == 'operationPartStr')) {
													text = children[column.dataIndex];
													return (<td
														style={{
															width: column.width,
															textAlign: column.align,
															maxWidth: column.width,
														}}
														title={column.visible == 'Y' ? children[column.dataIndex] : ''}
													>
														{column?.dataIndex === 'settledAmt' ? (
															<Popover placement="left" content={(<div>
																{'detailStr' in operation && operation['detailStr'] && typeof (operation['detailStr']) === 'string' && operation['detailStr'].indexOf(';') > -1 ? operation['detailStr'].split(';').map((itemPopover, indexPopover) => {
																	return itemPopover ? <div key={indexPopover}>{itemPopover};</div> : '';
																}) : operation['detailStr']}
															</div>)} title="已结算手术费金额">{text}</Popover>
														) : text}
													</td>)
												}
											}
										)}
								</tr>)
						}
					}
				)
			}
		});
		table.push(
			<div
				key="OperationTable"
				style={{ width: '100%', height: 'calc(100% - 45px)', overflow: 'auto' }}
				onScroll={this.onScroll}
				id="OperationTable"
			>
				<div style={{ width: tableWidth }} >
					<table border='1' style={{ border: '0px solid #E1E1E1' }} >
						<tbody>
							<Checkbox.Group
								value={this.state.selectOperation}
							>
								{tableItem}
							</Checkbox.Group>
						</tbody>
					</table>
				</div>
			</div >
		);
		return (
			<div style={{ overflow: 'hidden' }} className='operationSearch'>
				<ColumnAuthoritysModel
					clientWidth='800px'
					compontName="OperationSearch"
					configType="C"
					onRef={this.onColumnRef}
					reloadData={this.getTableTitle}
				/>
				<div ref={this.queryRef} style={{ minHeight: '78px' }}>
					<div className="flex-wrap-align-items" style={{ minHeight: '48px', padding: '7px 12px' }}>
						<CommonRangePicker
							width={280}
							label={languageObj.SeacrchOperationStartDate != null ? languageObj.SeacrchOperationStartDate.descripts : ""}
							startDate={moment()}
							endDate={moment()}
							format={'YYYY-MM-DD'}
							startChange={(date) => this.setState({ stDate: date })}
							endChange={(date) => this.setState({ endDate: date })}
						/>
						<Checkbox style={{ marginLeft: '8px' }} checked={this.state.checked} onChange={this.handleCheckbox}>
							{languageObj.SeacrchOperationApplyDate != null ? languageObj.SeacrchOperationApplyDate.descripts : ""}
						</Checkbox>
						{languageObj.SeacrchOperationStatus != null ? languageObj.SeacrchOperationStatus.descripts : ""}
						<Select
							allowClear
							placeholder="请选择"
							style={{ width: '100px', marginRight: '8px' }}
							value={this.state.operationStatus}
							onChange={this.handleStatusData}
						>
							{this.state.operationStatusData.map(data => (<Select.Option key={data.id} value={data.id} code={data.code}>{userData.language == "EN" ? data.enDescripts : data.descripts}</Select.Option>))}
						</Select>
						{languageObj.SeacrchOperationType != null ? languageObj.SeacrchOperationType.descripts : ""}
						<Select
							allowClear
							placeholder="请选择"
							style={{ width: '100px', marginRight: '8px' }}
							value={this.state.operationType} onChange={this.handleoperationType}
						>
							{this.state.operationTypeData.map(data => (<Select.Option key={data.id} value={data.id}>{userData.language == "EN" ? data.enDescripts : data.descripts}</Select.Option>))}
						</Select>
						{this.state.locType == 'OP' ? <>
							{languageObj.SeacrchOperationapplyLoc != null ? languageObj.SeacrchOperationapplyLoc.descripts : ""}
							<Select
								allowClear
								placeholder="请选择"
								style={{ width: '120px', marginRight: '8px' }}
								onChange={(id) => { this.setState({ applyLocID: id }) }}
							>
								{this.state.applyLocData.map(data => (<Select.Option key={data.id} value={data.id}>{data.descripts}</Select.Option>))}
							</Select>
						</> : ''}
						{languageObj.SeacrchOperationPatientLoc != null ? languageObj.SeacrchOperationPatientLoc.descripts : ""}
						<Select
							value={this.state.patWardID}
							onChange={this.handlePat}
							allowClear
							placeholder="请选择"
							style={{ width: '120px', marginRight: '8px' }}
						>
							{this.state.patWardData.map(data => (<Select.Option key={data.id} value={data.id}>{data.descripts}</Select.Option>))}
						</Select>
						{/*
							Create by SlimYi
							Date：2022-07-13
						*/}
						{this.state.operRoomOption === 'Y' &&
							<>
								手术室：<Select
									allowClear
									placeholder="请选择"
									value={this.state.operationLocID}
									onChange={this.handelRoomDesc}
									style={{ width: '100px', marginRight: '8px' }}
								>
									{
										this.state.operatingRoomData.map((item, index) => {
											return <Option key={index} value={item.operRoomID}>
												{item.operRoomDesc}
											</Option>
										})
									}
								</Select>
							</>
						}
						{
							<>
								主刀：<Select
									allowClear
									mode="multiple"
									placeholder="请选择"
									optionFilterProp="seachprop"
									value={doctorIDs}
									onChange={this.handelDoctor}
									style={{ width: doctorIDs && doctorIDs.length > 1 ? (doctorIDs.length * 80 + 'px') : '100px', marginRight: '8px' }}
								>
									{
										React.$SelectOptions(this.state.doctorArr)
									}
								</Select>
							</>
						}
						{
							<>
								主管：<Select
									allowClear
									mode="multiple"
									placeholder="请选择"
									optionFilterProp="seachprop"
									value={applyDoctorIDs}
									onChange={this.handelApplyDoctor}
									style={{ width: applyDoctorIDs && applyDoctorIDs.length > 1 ? (applyDoctorIDs.length * 80 + 'px') : '100px', marginRight: '8px' }}
								>
									{
										React.$SelectOptions(this.state.applyDoctorArr)
									}
								</Select>
							</>
						}
						{languageObj.SeacrchOperationPatient != null ? languageObj.SeacrchOperationPatient.descripts : ""}
						<Input
							style={{ width: '150px', marginRight: '8px' }}
							allowClear
							placeholder={languageObj.SeacrchOperationSearchPat != null ? languageObj.SeacrchOperationSearchPat.descripts : ""}
							value={this.state.patNumber}
							onChange={this.handlePatNumber}
						>
						</Input>
						<Button type='primary' style={{ marginLeft: 12 }} onClick={this.getOperationInfo}>{languageObj.SeacrchOperationSearch != null ? languageObj.SeacrchOperationSearch.descripts : ""}</Button>
						<Button type='primary' style={{ marginLeft: 12 }} onClick={this.printSummary}>{languageObj.SeacrchOperationPrintSummary != null ? languageObj.SeacrchOperationPrintSummary.descripts : "汇总打印"}</Button>
						<Button type='primary' style={{ marginLeft: 12 }} loading={this.state.exportLoading} onClick={this.onExportData.bind(this)}>导出</Button>
					</div>
					<Row>
						<Col span={24} style={{ textAlign: 'right', padding: '10px 24px', border: '1px solid #EEE' }}>
							<div className="content-flex" style={{ marginTop: '8px' }}>
								<span className="contentApply"></span>&nbsp;&nbsp;{languageObj.SeacrchOperationAlreadyApplied != null ? languageObj.SeacrchOperationAlreadyApplied.descripts : ""}
								<span className="contentArrange"></span>&nbsp;&nbsp;{languageObj.SeacrchOperationPlanned != null ? languageObj.SeacrchOperationPlanned.descripts : ""}
								<span className="contentReject"></span>&nbsp;&nbsp;{languageObj.SeacrchOperationRejected != null ? languageObj.SeacrchOperationRejected.descripts : ""}
								<span className="contentOperation"></span>&nbsp;&nbsp;{languageObj.SeacrchOperationIntraoperative != null ? languageObj.SeacrchOperationIntraoperative.descripts : ""}
								<span className="contentResume"></span>&nbsp;&nbsp;{languageObj.SeacrchOperationRestore != null ? languageObj.SeacrchOperationRestore.descripts : ""}
								<span className="contentOperationed"></span>&nbsp;&nbsp;{languageObj.SeacrchOperationSurgeryCompleted != null ? languageObj.SeacrchOperationSurgeryCompleted.descripts : ""}
								<span className="contentFinish"></span>&nbsp;&nbsp;{languageObj.SeacrchOperationFinish != null ? languageObj.SeacrchOperationFinish.descripts : ""}
								{/* <span className="contentDay"></span>&nbsp;&nbsp;{languageObj.SeacrchOperationProposedDaytime != null ? languageObj.SeacrchOperationProposedDaytime.descripts : ""} */}
							</div>
						</Col>
					</Row>
					<br />
					<Row style={{ height: '40px', lineHeight: '39px', border: '1px solid #E1E1E1' }}>
						{this.state.locType === 'OP' ?
							<Col span={12}>
								<i className="database" style={iconStyle} ></i>
								{/* <Icon type="database" style={iconStyle} ></Icon> */}
								<span style={spanStyle} onClick={this.arrangeOperation.bind(this, '02')}>{languageObj.SeacrchOperationLayoutOperation != null ? languageObj.SeacrchOperationLayoutOperation.descripts : ""} |</span>
								{/* <Icon type="delete" style={iconStyle} ></Icon> */}
								<i className="Upadate" style={iconStyle} ></i>
								{/* <Icon type="database" style={iconStyle} ></Icon> */}
								<span style={spanStyle} onClick={this.addEditArr.bind(this)}>修改 |</span>
								<i className="delete" style={iconStyle} ></i>
								<span style={spanStyle} onClick={this.arrangeOperation.bind(this, '01')}>{languageObj.SeacrchOperationCleanLayout != null ? languageObj.SeacrchOperationCleanLayout.descripts : ""} |</span>
								<i className="reject" style={iconStyle} ></i>
								{/* <Icon type="print" style={iconStyle} ></Icon> */}
								<span style={spanStyle} onClick={this.rejectOpration}> {languageObj.SeacrchOperationRejected != null ? languageObj.SeacrchOperationRejected.descripts : ""}</span>

								{/* <Icon type="edit" style={iconStyle} ></Icon> */}
								{/* <i className="edit" style={iconStyle} ></i>
								<span style={spanStyle} onClick={this.requestConsome.bind(this, '2')}>{languageObj.SeacrchOperationInputAnesthesiaInfo != null ? languageObj.SeacrchOperationInputAnesthesiaInfo.descripts : ""} |</span> */}
								{/* <Icon type="edit" style={iconStyle} ></Icon> */}
								<i className="Check" style={iconStyle} ></i>
								<span style={spanStyle} onClick={this.requestCheck.bind(this, 0)}> 手术安全核查 |</span>
								<i className="Count" style={iconStyle} ></i>
								<span style={spanStyle} onClick={this.requestCount}> 手术清点 |</span>
								<i className="rick" style={iconStyle} ></i>
								<span style={spanStyle} onClick={this.requestRick}> 手术风险评估|</span>
								<i className="dispatch" style={iconStyle}></i>
								<span style={spanStyle} onClick={this.requestPatDisptch}> 手术护理记录|</span>
								<i className="icon" style={iconStyle}></i>
								<span style={spanStyle} onClick={this.requestConsome.bind(this, '3')}>{languageObj.SeacrchOperationAfterSurgeryRegister != null ? languageObj.SeacrchOperationAfterSurgeryRegister.descripts : ""} |</span>
								<Popconfirm title="是否确认撤消术后登记???" onConfirm={() => { this.cancelSurgeryRegister() }} >
									<span style={spanStyle}  > 撤消术后登记|</span>
								</Popconfirm>
							</Col> : ""}
						{this.state.locType === 'O' || this.state.locType === 'I' ?
							<Col span={12}>
								<i className="database" style={iconStyle} ></i>
								<span style={spanStyle} onClick={this.applyOperation}>发送</span>
							</Col> : ""}
						<Col span={4}>
							{selectData?.wristbandFlag === 'Y' ? (
								<span style={{ marginRight: '12px' }} className="span" onClick={this.handleWristbandPrint}>
									<Icon style={{ marginRight: '4px' }} type="printer" />
									腕带打印
								</span>
							) : ''}
							<i className="print" style={iconStyle} ></i>
							<span style={spanStyle} onClick={this.print}>{this.requestConsome.bind(this, '3')} {languageObj.SeacrchOperationPrintNotice != null ? languageObj.SeacrchOperationPrintNotice.descripts : ""}</span>
							<i className="file" style={iconStyle}></i>
							<span onClick={this.handleAdd} style={spanStyle}>{this.requestConsome.bind(this, '3')} {languageObj.SeacrchOperationClickMedicalOrderEntry != null ? languageObj.SeacrchOperationClickMedicalOrderEntry.descripts : ""}</span>
						</Col>
					</Row>
				</div>
				<div style={{ height: 'calc(100% - ' + (20 + queryHeight) + 'px)', width: '100%' }}>
					<div className="operationdivStyle">{table}</div>
					<div>
						<CommonPagination
							size='large'
							current={this.state.page}
							total={this.state.total}
							search='search'
							onShowSizeChange={this.onShowSizeChange.bind(this)}
							complete={true}
							dataSource={this.state.tableData}
							onChange={this.onChange.bind(this)}
						// scroll={{ y: store.getState().tableHeight.y + 76 - queryHeight + 'px' }}
						/>
					</div>

				</div>
				<OperationCheck
					onRef={this.onConsumeCheckRef}
					activeKey={this.state.activeKey}
					operationID={this.state.selectedID}
					admID={this.state.admID}
					locType={this.state.locType}
					handleQuery={this.getOperationInfo}
					handleCheck={this.handleCheck}
					isShow={this.state.isShow}
				/>
				<AnesthesiaModel
					onRef={this.onConsumeRef}
					operationID={this.state.selectedID}
					activeKey={this.state.activeKey}
					admID={this.state.admID}
					locType={this.state.locType}
					handleQuery={this.getOperationInfo}
					status={this.state.selectStatusCode}
				/>
				<OperativeCount
					onRef={this.onConsumeCountRef}
					operationID={this.state.selectedID}
					admID={this.state.admID}
					locType={this.state.locType}
					handleQuery={this.getOperationInfo}
					isShow={this.state.isShow}
				/>
				<RiskAssessment
					onRef={this.onConsumeSomeRef}
					operationID={this.state.selectedID}
					admID={this.state.admID}
					locType={this.state.locType}
					handleQuery={this.getOperationInfo}
					isShow={this.state.isShow}
				/>

				{/* 病人转运申请 改为: 手术护理记录 */}
				<OperationPatDispatch
					onRef={this.onConsumeDispatchRef}
					handleQuery={this.getOperationInfo}
				/>
			</div>
		)
	}
}